import React from 'react';
import { Link } from 'react-router';

import { removePatient,fetchPatients } from '../../store/actions';
import { connect } from 'react-redux'
import { Table,Icon,Tag,message,Modal } from 'antd';

class _Patients extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            patients: this.props.items || [],
            isFetch:this.props.isFetch,
            user: this.props.user,
            modal: {
                title:'',
                text:'',
                visible:false
            }
        };
        this.deleteP = this.deleteP.bind(this);
        this.edit = this.edit.bind(this);
        this.changePage = this.changePage.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
        this.handleOk = this.handleOk.bind(this);
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    handleOk(){
        const _this = this,
            token = _this.state.user.accessToken,
            uid = _this.state.user.user.user_id,
            pid= _this.state.modal.pid,
            status= 1,
            opts = {
                userid: uid,
                status: status
            };
        _this.setState({
            modal:{
                confirmLoading: true,
                visible:true,
                text:'您确认要删除这个亲友吗？',
                title:'删除亲友'
            }
        });
        _this.props.dispatch(removePatient(pid,function(){
            message.success('删除亲友成功',1,function(){
                _this.setState({
                    modal: {
                        confirmLoading: false,
                        visible:false,
                        text:'',
                        title:'',
                        pid:''
                    }
                },function(){
                    _this.props.dispatch(fetchPatients(opts))
                })
            });
        },function(res){
            message.error(`出错了！！${res.head.msg}`,1)
        }))
    }
    handleCancel(){
        this.setState({
            modal:{
                visible:false
            }
        })
    }
    deleteP(e){
        e.preventDefault();
        this.setState({
            modal:{
                visible:true,
                text:`您确认要删除 ${e.target.name} 吗？`,
                title:'删除亲友',
                pid:e.target.id
            }
        });
    }
    edit(e){
        e.preventDefault();
        const pid= e.target.id;
        this.context.router.push(`/patient-edit/${pid}`)
    }
    componentWillMount(){
        const _this = this,
            _user = _this.props.user,
            uid = _user.user.user_id,
            status = 1,
            opts = {
                userid: uid,
                status: status
            };
        this.props.dispatch(fetchPatients(opts));
    }
    componentWillReceiveProps(nextProp){
        this.setState({
            patients: nextProp.items,
            isFetch:nextProp.isFetch,
            patientsLen:nextProp.items && nextProp.items.length,
            user:nextProp.user
        })
    }
    changePage(){
        this.props.dispatch(changePage('patient-detail'));
    }
    render(){
        const data = this.state.patients,
            dataNormal = data.filter((item)=>{
                return item.status == 1
            }),
            dataDel = data.filter((item)=>{
                return item.status == 0
            }),
            dataLen = dataNormal.length;
        const columns = [{
            title: '姓名',
            dataIndex: 'name',
            render(text,record) {
                return <span>{text}</span>;//<Link to={`/patient-detail/${record.id}`}>{text}</Link>;
            }
        }, {
            title: '性别',
            dataIndex: 'gender',
            render(text) {
                return text ==='M'?'男':(text === 'F'?'女':'未知')
            }
        }, {
            title: '出生日期',
            dataIndex: 'birthday'
        }, {
            title: '身份证号',
            dataIndex: 'idcard',
            render(text){
                return text?text:'--'
            }
        }, {
            title: '关系',
            dataIndex: 'relationship'
        }, {
            title: '操作',
            render: (text, record) => (
                <span>
                    {record.relationship !== '本人'?<span><a href="#" onClick={this.deleteP} name={record.name} id={record.id}>删除</a>
                        &nbsp;&nbsp;<span className="ant-divider"> </span>&nbsp;&nbsp;</span>:''}

                  <a href="#" onClick={this.edit} id={record.id}>编辑</a>
                </span>
            )
        }];


        //const dataLen = this.state.patientsLen;
        const pagination = {
            total: dataLen,
            showSizeChanger: true
            /*,onShowSizeChange(current, pageSize) {
                console.log('Current: ', current, '; PageSize: ', pageSize);
            },
            onChange(current) {
                console.log('Current: ', current);
            }*/
        };
        return(
            <div id="patients">
                <Table columns={columns} dataSource={dataNormal} pagination={pagination} />

                <Modal title={this.state.modal.title}
                       visible={this.state.modal.visible}
                       onOk={this.handleOk}
                       confirmLoading={this.state.modal.confirmLoading}
                       onCancel={this.handleCancel}
                >
                    <p>{this.state.modal.text}</p>
                </Modal>
            </div>
        )
    }
}
let Patients ;

export default Patients = connect((state)=>{
    const {isFetch,items} = state.rootReducer.patients;
    const {user} = state.rootReducer;
    return {isFetch,items,user}
})(_Patients)